<template>
  <view class="hospital-choice">
    <view class="header">
      <text class="title">就诊医院</text>
    </view>
    <view class="search">
      <uni-search-bar class="uni-mt-15" radius="5" placeholder="请输入医院名称" clearButton="auto" cancelButton="none"
        @confirm="searchHospital" @blur="searchHospital" @clear="searchHospital" />
    </view>
    <scroll-view scroll-y="true" class="my-scroll-view">
      <view class="hospital-list">
        <view @click="choiceHospital(hospital)" class="hospital-item" v-for="(hospital, index) in hospitalList"
          :key="hospital.id">
          <image class="hospital-image" :src="hospital.icon" mode="aspectFill"></image>
          <view class="hospital-info">
            <text class="hospital-name">{{ hospital.name }}</text>
            <view class="hospital-tags">
              <text class="hospital-tag" v-for="(tag, tagIndex) in hospital.label.split(',')"
                :key="tagIndex">{{ tag }}</text>
            </view>
            <view class="highlight-department">
              <text class="department-title">重点科室：</text>
              <text class="department-content">{{ hospital.department }}</text>
            </view>
            <view class="location">
              <uni-icons size="20" type="location-filled"></uni-icons>
              <text class="hospital-location">{{ hospital.address }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    uselocation
  } from '@/stores/location.js';
  import {
    ref,
    defineEmits,
    onMounted
  } from 'vue';
  const locationInfo = uselocation().locationInfo
  const hospitalList = ref([])

  //当cityCode有值时发出请求,直接在onmout方法中请求，citycode值还没有获取到，通过观察者模式发现值变化时发生请求
  onMounted(() => {
    let param = {
      // cityCode: locationInfo.id,
      //调试使用
      cityCode: 410100,
      pageNo: 1,
      pageSize: 100
    }
    getHospitaol(param)
  });

  function searchHospital(e) {
    let param = {
      // cityCode: locationInfo.id,
      cityCode: 410100,
      name: e.value,
      pageNo: 1,
      pageSize: 100
    }
    getHospitaol(param)
  }

  async function getHospitaol(param) {
    //获取
    const result = await http.getRequest("/peizhen/hospital/page", param)
    if (result.code == 0) {
      hospitalList.value = result.data.list
    } else {
      uni.showToast({
        title: '获取医院失败',
        icon: 'error',
        duration: 1000
      })
    }
  }

  //传值给父
  const emit = defineEmits(['sendHosptial:value']); // 定义可以触发的自定义事件
  function choiceHospital(hospital) {
    console.log(hospital);
     emit('sendHosptial:value', hospital); // 触发事件并传递值  
  }
</script>

<style lang="scss" scoped>
  .search {
    width: 500rpx;
    height: 60rpx;
    margin-bottom: 30rpx;
  }

  .hospital-list {
    display: flex;
    flex-direction: column;
  }

  .hospital-item {
    display: flex;
    align-items: start;
    margin-bottom: 25rpx;
    background-color: #ffffff;
    padding: 17rpx;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 7rpx rgba(0, 0, 0, 0.1);
  }

  .hospital-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 8rpx;
    margin-right: 25rpx;
  }

  .hospital-info {
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .hospital-name {
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 8rpx;
    font-weight: bold;
    /* 添加字体加粗 */
  }

  .hospital-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8rpx;

  }

  .hospital-tag {
    font-size: 24rpx;
    color: #ffffff;
    margin-right: 8rpx;
    margin-bottom: 8rpx;
    padding: 4rpx 8rpx;
    background-color: #42b983;
    border-radius: 5rpx;
  }

  .highlight-department {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    margin-top: 8rpx;
  }

  .department-title {
    margin-right: 17rpx;
    /* 增加与内容的间距 */
    font-weight: bold;
    /* 加粗标题 */
    color: #FC6B05;

  }

  .department-content {
    color: #666;
    /* 灰色内容，与标题形成对比 */
    font-weight: normal;
    /* 确保内容不是加粗的 */
    white-space: nowrap;
    /* 如果科室名称很长，可以选择不换行或添加省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 文本溢出时显示省略号 */

  }

  .location {
    margin-top: 8rpx;
  }

  .hospital-location {

    font-size: 24rpx;
    color: #999999;
  }

  .header {
    .title {
      margin: 20rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 40rpx;
    }
  }

  .my-scroll-view {
    height: 800rpx;
  }
</style>